<!DOCTYPE html>
<html lang="en">

  <head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta charset="utf-8" />
    <title>表格简单实现</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
    <script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
    <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
    <script src="page.js"></script>
  </head>
  <body>
    <div>
      <table class="table" >
        <thead>
          <tr>
            <th>姓名</th>
            <th>年龄</th>
          </tr>
        </thead>
        <tbody class="page-content">
          <tr>
            <td> foo </td>
            <td> 12 </td>
          </tr>
          <tr>
            <td> bar </td>
            <td> 13 </td>
          </tr>
          <tr>
            <td> ao </td>
            <td> 11 </td>
          </tr>
          <tr>
            <td> fao </td>
            <td> 12 </td>
          </tr>

          <tr>
            <td> foo </td>
            <td> 12 </td>
          </tr>
          <tr>
            <td> bar </td>
            <td> 13 </td>
          </tr>
          <tr>
            <td> ao </td>
            <td> 11 </td>
          </tr>
          <tr>
            <td> fao </td>
            <td> 12 </td>
          </tr>
                    <tr>
            <td> foo </td>
            <td> 12 </td>
          </tr>
          <tr>
            <td> bar </td>
            <td> 13 </td>
          </tr>
          <tr>
            <td> ao </td>
            <td> 11 </td>
          </tr>
          <tr>
            <td> fao </td>
            <td> 12 </td>
          </tr>
          <tr>
            <td> foo </td>
            <td> 12 </td>
          </tr>
          <tr>
            <td> bar </td>
            <td> 13 </td>
          </tr>
          <tr>
            <td> ao </td>
            <td> 11 </td>
          </tr>
          <tr>
            <td> fao </td>
            <td> 12 </td>
          </tr>
        </tbody>
      </table>
      <div class="page">
        <label class="page-item-count"></label>
        <label class="page-info" > </label>
        <a role="button" class="start-page btn-lg">|&lt;</a>
        <a role="button" class="prev-page btn-lg">&lt;</a>
        <label class="current-page">  </label>
        <a role="button" class="next-page btn-lg">&gt;</a>
        <a role="button" class="end-page btn-lg">&ge;|</a>
      </div>
    </div>
  </body>

</html>
